<template>
  <div class="MyCity">
  <!-- 我的city -->
  <!-- <p>提示：{{$route.params}}</p> -->
  <div class="City-img">
地区图片
  </div>
  <div class="City-TeSe">
    <h2>xx代表特色</h2>
<span>xxx</span>
<span>xxx</span>
<span>xxx</span>
<span>xxx</span>
<span>xxx</span>
  </div>
  <div class="City-fenlei">
  <h3 style="display: inline-block;">全部分类:</h3>
    <span>xxx</span>
    <span>xxx</span>
    <span>xxx</span>
    <span>xxx</span>
  <span>xxx</span>
  <span>xxx</span>
  <span>xxx</span>
  </div>
  <div class="City-tuijian">
    <h2>农产品推荐</h2>
    <div class="City-shangpin" v-infinite-scroll="Cityloading"  v-for="(item,index) in CityForm" :key="index"  v-show="index<Cityload" >
          <router-link :to="'/Item/'+item.id" target="_blank" >
        <div style="width: 250px;height: 400px;background: powderblue; display:inline-block; margin-right: 25px;">
        <el-image  :src="item.img" width="250" height="300" style="float: left;" lazy>
        </el-image>
       商品名称：{{item.name }} 
         价钱：{{item.value }}
      </div>
          </router-link>
  </div>
  </div>
  </div>
</template>

<script>
export default {
name:'MyCity',
data() {
  return {
    Citybool:true,
    Cityload:16,
    CityForm:[
      {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},
      {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},
      {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},
      {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},  {name:'zhangsan',
       value:'131',
        img:require('../assets/2.jpg'),
      id:5},
    
    ]
  }
},
methods:{
  Cityloading(){
    if(this.Citybool){//第一次执行，之后五秒内不再执行
	//此处写需要触发的函数\方法
  this.Cityload+=8
  // console.log(this.AllAreaload);
   this.Citybool = false
   setTimeout(()=>{
      this.Citybool = true
   },2000)
}else{
  //  console.log('不执行')
}
  }
}
}
</script>

<style>
.City-img{
  background-color: skyblue;
  height: 150px;
}
.City-TeSe{
  text-align: center;
  background-color: aqua;
}
.City-TeSe span{
  margin-left: 40px;
}
.City-fenlei{
  width: 1200px;
  background-color: aquamarine;
  margin: 0 auto;
}
.City-fenlei span{
  margin-left: 10px;
}
.City-tuijian{
  width: 1200px;
  background-color: chartreuse;
  margin: 0 auto;
  text-align: center;
}
.City-shangpin{
  width: 250px;height: 400px;
  background: powderblue;
  display:inline-block; 
  margin-right: 25px;
}
</style>